<template>
	<view class="recommend">
		<view class="f5" @click="f5Click">
			<image class="image" src="../../static/icon/f5.png" mode="aspectFit"></image>
			<text class="text">换一个</text>
		</view>
		<view class="title" v-if="dataSource">
			<text class="name">{{dataSource.title}}</text>
			<view class="subTitle">
				<text class="text">{{dataSource.caloric}}大卡</text>
				<text
					class="text">{{dataSource.type==1?'早餐':dataSource.type==2?"午餐":dataSource.type==3?"晚餐":"加餐"}}</text>
			</view>
		</view>
		<view class="desCard" v-if="dataSource">
			<text>{{dataSource.describe}}</text>
		</view>
		<view class="collocation" v-if="dataSource">
			<ppc-section title="推荐搭配"></ppc-section>
			<view v-for="(item,index) in dataSource.collocation" :key="index">
				<uni-card :title="item.name" :sub-title="item.metering+'克'"
					:extra="'蛋白质:'+item.protein+'克/'+'碳水:'+item.carbohydrate+'克/'+'脂肪:'+item.fat+'克'"
					:thumbnail="item.image" @click="onClick">
				</uni-card>
			</view>
		</view>
		<view class="charts">
			<ppc-section title="营养分析"></ppc-section>
			<view class="canvas">
				<canvas style="width: 100%; height: 100%;" type="2d" id="homeownerCanvas"
					class="homeowner-canvas_charts"></canvas>
			</view>
			<view class="chartsBox" v-if="dataSource">
				<view class="item" v-for="(item,index) in canvasData" :key="index">
					<text class="text">{{item.title}}</text>
					<text class="text">{{item.text}}克</text>
				</view>
			</view>
		</view>
	</view>
	<view class="nothing" v-if="!dataSource">
		<image src="/static/nothing.png" mode="aspectFit"></image>
	</view>
	<ppc-loading v-if="loading"></ppc-loading>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import canvas from '../../tools/canvas.js'
	import ppcSection from '/components/ppcSection.vue'
	import ppcLoading from '/components/ppcLoading.vue'
	const {
		proxy
	} = getCurrentInstance()
	const loading = ref(false)
	const disable = ref(false)
	const type = ref(0)
	const dataSource = ref()
	const canvasData = ref([{
			"value": 0.333333,
			"text": 0,
			"color": "#FC8452",
			"title": "碳水"
		},
		{
			"value": 0.333333,
			"text": 0,
			"color": "#91CB74",
			"title": "蛋白质"
		},
		{
			"value": 0.333333,
			"text": 0,
			"color": "#FAC858",
			"title": "脂肪"
		}
	])
	onLoad((option) => {
		option.type == '早餐推荐' ? type.value = 1 : option.type == '午餐推荐' ? type.value = 2 : option.type ==
			'晚餐推荐' ?
			type.value = 3 : type.value = 4
		getRecommendFood()
	})
	const f5Click = () => {
		if (!disable.value) {
			getRecommendFood()
		} else {
			uni.showToast({
				title: "暂无更多推荐",
				icon: "none",
				duration: 2000
			})
		}
	}
	const onClick = () => {

	}
	const getRecommendFood = () => {
		loading.value = true
		const instance = getCurrentInstance()
		proxy.$http("getreCommendFood", {
			type: type.value
		}).then(res => {
			if (!res.errCode) {
				if (dataSource.value && res.result.data.data[0]._id == dataSource.value._id) {
					uni.showToast({
						title: "暂无更多推荐",
						icon: "none",
						duration: 2000
					})
					disable.value = true
					loading.value = false
					return
				}
				dataSource.value = res.result.data.data[0]
				dataSource.value.collocation.map(item => {
					canvasData.value[0].text += item.carbohydrate
					canvasData.value[1].text += item.protein
					canvasData.value[2].text += item.fat
				})
				canvasData.value.forEach(item => {
					item.value = item.text / (canvasData.value[0].text + canvasData.value[1].text +
						canvasData.value[2].text)
				})
				loading.value = false
				uni.createSelectorQuery().in(instance).select(`#homeownerCanvas`).fields({
					node: true,
					size: true
				}).exec(result => {
					const width = result[0].width
					const height = result[0].height
					canvas.canvasGraph('homeownerCanvas', canvasData.value, dataSource.value.caloric,
						instance, (height -
							20) / 3,
						(height / 3))
				})
			}
		})
	}
</script>

<style lang="scss">
	.recommend {
		position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;

		.f5 {
			position: absolute;
			top: 10rpx;
			right: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.image {
				width: 50rpx;
				height: 50rpx;
			}

			.text {
				font-size: 24rpx;
				color: #afafaf;
			}
		}

		.title {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 50rpx;

			.subTitle {
				font-size: 26rpx;
				font-weight: 500;
				margin: 5rpx 0;
				display: flex;
				color: #afafaf;


				.text {
					margin: 0 10rpx;
				}
			}
		}

		.desCard {
			padding: 30rpx;
			margin: 30rpx 30rpx 0 30rpx;
			background: #FFF;
			border-radius: 30rpx;
			display: flex;
			font-size: 28rpx;
			justify-content: flex-start;
		}

		.collocation {
			width: 95%;
			background: #FFF;
			border-radius: 30rpx;
			margin-top: 30rpx;
		}
	}

	.charts {
		height: 600rpx;
		width: 95%;
		margin-top: 30rpx;
		background: #FFF;
		border-radius: 30rpx;

		.canvas {
			height: 300rpx;
			width: 100%;
		}

		.chartsBox {
			display: flex;
			justify-content: space-around;
			padding-bottom: 60rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.text {
					font-weight: bold;
				}
			}
		}
	}

	.nothing {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>